<template>
  <a-row>
    <a-col :span="12">
      <a-form
        :label-col="{ span: 2 }"
        :wrapper-col="{ span: 22 }"
        autocomplete="off"
        labelAlign="left"
      >
        <a-form-item label="海报">
          <ImgsUpload :value="[]" :version="now" ref="imgsUpload" />
        </a-form-item>
        <a-form-item label="户型">
          <a-input v-model:value="formValue.unitName" />
        </a-form-item>
        <a-form-item label="建筑面积" extra="填写数字,单位:平方">
          <a-input v-model:value="formValue.buildupArea" />
        </a-form-item>
        <a-form-item label="销售状态" extra="">
          <a-input v-model:value="formValue.saleStatus" />
        </a-form-item>
        <a-form-item label="" extra="" :wrapper-col="{ span: 14, offset: 2 }">
          <a-button key="submit" type="primary" @click="handleSave"
            >提交</a-button
          >
        </a-form-item>
      </a-form>
    </a-col>
    <a-col :span="12">
      <a-table
        rowKey="id"
        :defaultExpandAllRows="true"
        :columns="columns"
        :style="{ marginTop: '0px' }"
        :data-source="data"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'actions'">
            <a-button type="link" @click="handleDel(record)">删除 </a-button>
          </template>
        </template>
      </a-table>
    </a-col>
  </a-row>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
} from "vue";

import { copyObjVal, timestamp } from "@/utils/common";
import { message } from "ant-design-vue";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
dayjs.locale("zh-cn");

import AreaSelector from "@/components/area/threeAreaSelector/index.vue";
import ImgsUpload from "@/components/imgsUpload/index.vue";

export default defineComponent({
  components: { AreaSelector, ImgsUpload },
  setup(props, context) {
    const areaSelector = ref();
    const imgsUpload = ref();

    const now = ref(timestamp());

    const data = ref([] as any);

    const columns = ref([
      {
        title: "#",
        dataIndex: "idx",
        key: "idx",
        width: 50,
      },
      {
        title: "户型",
        dataIndex: "unitName",
        key: "unitName",
      },
      {
        title: "在售状态",
        dataIndex: "saleStatus",
        key: "saleStatus",
      },
      {
        title: "操作",
        width: 150,
        key: "actions",
      },
    ] as any);

    const defaultValues = () => {
      return {
        unitName: "", //户型
        buildupArea: "", //建筑面积
        saleStatus: "", //销售状态
        posters: [], //海报
      };
    };

    const formValue = ref(defaultValues() as any);

    const getData = () => {
      let target = {};
      copyObjVal(formValue.value, target);
      return target;
    };

    const handleSave = () => {
      validateParams()
        .then((res: any) => {
          formValue.value.idx = data.value.length + 1;
          data.value.push(formValue.value);
          formValue.value = defaultValues();
          imgsUpload.value.setData([]);
        })
        .catch((res: any) => {
          message.error(res);
        });
    };

    const validateParams = () => {
      return new Promise((resolve: any, reject: any) => {
        if (!formValue.value.unitName) {
          reject("请填写户型");
        }
        if (!formValue.value.buildupArea) {
          reject("请填写建筑面积");
        }
        if (!formValue.value.saleStatus) {
          reject("请填写销售状态");
        }
        let posters = imgsUpload.value.getData();
        console.log("上传图片>>>", posters);
        if (posters == null || posters.length == 0) {
          reject("请上传海报");
        }
        formValue.value.posters = posters;
        resolve("ok");
      });
    };

    const handleDel = (row: any) => {
      let arr = [] as any;
      for (let item of data.value) {
        if (item.idx != row.idx) {
          arr.push(item);
        }
      }
      data.value = arr;
    };

    return {
      formValue,
      areaSelector,
      getData,
      imgsUpload,
      now,
      columns,
      data,
      handleSave,
      handleDel,
    };
  },
});
</script>
